<template>
  <div class="CateBook">
    <!-- ????
    {{this.queryInfo.query}}
    <button @click="get">点我</button>-->
    <div class="seckill-content">
      <div class="seckill-item" v-for="(item, index) in catebook" :key="index">
        <div class="seckill-item-img">
          <router-link :to="'/gooddetail/'+item.bookid">
            <img :src="item.bookImg" />
          </router-link>
        </div>
        <div class="seckill-item-info">
          <p>{{item.bookname}}</p>

          <p>{{item.author}}</p>
          <p>
            <span class="seckill-price text-danger">
              <!-- <Icon type="logo-usd"></Icon> -->
             ￥ {{item.price}}
            </span>
            <span class="seckill-old-price">
              <s>￥{{item.oldprice}}</s>
            </span>
          </p>
        </div>
      </div>
    </div>
    {{this.$route.query.cateid}}
    <!-- {{this.queryInfo.query}} -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        query: 3
      },
      catebook: []
    };
  },
  mouted() {},
  created() {
    this.getBookList();
  },
  methods: {
    // 根据父组件传过来的分类id，从后台查询相应的数据
    async getBookList() {
      const { data: res } = await this.$axios.get(
        "http://localhost:8080/api/admin/goodList/catebook",
        {
          params: this.queryInfo
        }
      );
      this.catebook = res.data;
      console.log(this.catebook);
    },
    get() {
      console.log(this.queryInfo.query);
    }
  }
};
</script>

<style  scoped>
.CateBook {
  margin-top: 20px;
}
/* 容器大小 */
.seckill-content {
  /* height: 400px; */
  height: 300px;
  min-height: 200px;
}
/* 装单个图片和文字的容器 */
.seckill-item {
  float: left;
  height: 200px;
  width: 200px;
}
.seckill-item-img {
  height: 180px;
  width: 180px;
  overflow: hidden;
}
/* 这里设定图片铺满容器设定的大小 */
.seckill-item-img img {
  height: 100%;
  width: 100%;
  transition: 0.3s linear;
}
.seckill-item-img:hover img {
  /* margin-top: 6px; */
  /* transition: margin-top 0.3s; */
  transform: scale(1.1);
}
.seckill-item-info{
  margin-top: 10px;
  margin-left: 10px;
}
.seckill-item-info p:first-child{
  /* text-align: center */
  /* margin-left: 35px; */
  font-size: 15px;
  color: black;
}
.seckill-item-info p:nth-child(2){
  /* text-align: center */
  /* margin-left: 35px; */
  font-size: 10px;
  color: gray;
}
.seckill-item-info span:nth-child(1){
  /* padding: 5px; */
  /* padding-left: 15px; */
  /* padding-right: 15px; */
  font-size: 15px;
  color:#cc3300;
  font-family: Arial;
  font-weight: bold;

}
.seckill-item-info span:nth-child(2){
  /* padding: 5px; */
  /* padding-left: 15px; */
  padding-right: 15px;
  font-size: 15 px;
  color: #aaa;
  font-family: Arial;
}
.tabs[data-v-8dc7cce2]{
  height: 200px;
}
</style>>